import 'package:demo/main.dart';
import 'package:demo/model/chat.dart';
import 'package:demo/model/user.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_htmlful/flutter_htmlful.dart';

import 'chat_cubit.dart';

class ChatPage extends StatefulWidget {
  const ChatPage({super.key});

  @override
  State<ChatPage> createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  var textController = TextEditingController();

  var scrollController = ScrollController();

  late User args;

  @override
  Widget build(BuildContext context) {
    args = ModalRoute.of(context)!.settings.arguments as User;
    return BlocProvider(
      create: (context) => ChatCubit(args),
      child: BlocBuilder<ChatCubit, ChatState>(
        builder: (BuildContext context, ChatState state) {
          return SafeArea(
            child: Scaffold(
              appBar: AppBar(
                title: Text('应用'),
              ),
              body: Div(
                style: Style(
                  height: double.infinity,
                  backgroundColor: const Color(0xffECECEC),
                ),
                body: [
                  Expanded(
                    child: ListView.builder(
                      controller: scrollController,
                      itemCount: state.dataList.length,
                      itemBuilder: (context, index) {
                        var isMy = state.dataList[index].from.id == globalCubit.state.user.id;
                        return Div(
                          style: Style(
                            direction: Axis.horizontal,
                            padding: 10,
                            textDirection: isMy ? TextDirection.rtl : TextDirection.ltr,
                          ),
                          body: [
                            Img(
                              src:
                                  'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90e9dc32102341929ae810bd06794123~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp',
                              style: Style(
                                height: 60,
                                width: 60,
                                fit: BoxFit.cover,
                              ),
                            ),
                            Div(
                              style: Style(
                                flexGrow: 1,
                                textDirection: isMy ? TextDirection.rtl : TextDirection.ltr,
                                paddingLeft: 10,
                                paddingRight: 10,
                              ),
                              body: [
                                Container(
                                  padding: isMy
                                      ? const EdgeInsets.fromLTRB(10, 10, 18, 10)
                                      : const EdgeInsets.fromLTRB(18, 10, 10, 10),
                                  decoration: BoxDecoration(
                                    image: DecorationImage(
                                      image: AssetImage('assets/images/message_bg_${isMy ? "right" : "left"}.png'),
                                      centerSlice: const Rect.fromLTRB(12, 20, 98, 36),
                                    ),
                                  ),
                                  child: Text(state.dataList[index].content),
                                ),
                              ],
                            ),
                          ],
                        );
                      },
                    ),
                  ),
                  Div(
                    style: Style(
                      direction: Axis.horizontal,
                      padding: 6,
                      backgroundColor: const Color(0xffF4F4F4),
                      border: const Border(
                        top: BorderSide(
                          color: Color(0xffE3E3E3),
                          width: 1,
                        ),
                      ),
                    ),
                    body: [
                      Div(
                        style: Style(flexGrow: 1),
                        body: TextField(
                          controller: textController,
                          onEditingComplete: () {
                            debugPrint('onEditingComplete');
                            send(context);
                          },
                          onSubmitted: (s) {
                            debugPrint('onEditingComplete $s');
                            send(context);
                          },
                        ),
                      ),
                      TextButton(
                        onPressed: () {
                          send(context);
                        },
                        child: const Text('发送'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  send(context) {
    context.read<ChatCubit>().addChat(
          Chat(
            from: args,
            to: globalCubit.state.user,
            content: textController.text,
          ),
        );
    textController.text = '';
    FocusScope.of(context).unfocus();
    scrollController.jumpTo(scrollController.position.maxScrollExtent);
  }
}
